<template>
  <div class="study-sentence">
    <div class="study-sentence-content" v-hidden-opacity="isShowSentence">
      {{ sentenceData.sentence }}
    </div>
    <div class="study-sentence-question">
      <div class="study-sentence-word">
        <div class="check-word">
          <span v-for="(item, index) in answerList" :key="index">
            <!-- 标点符号 -->
            <span v-if="item.isPunctuation"> {{ item.trueWord }}&nbsp; </span>
            <span
              class="click word-input"
              :class="[
                isCheckedSentence && item.isTrue == false ? 'false-word' : '',
                isCheckedSentence && item.isTrue == true ? 'true-word' : '',
              ]"
              v-else-if="item.checkedOption"
              @click="cancellOption(item)"
            >
              {{ item.checkedOption.word }}
            </span>
            <span class="mr5" v-else>___</span>
          </span>
        </div>
        <div
          class="delete click"
          v-if="!isCheckedSentence"
          @click="deleteNearOption"
        >
          <i class="el-icon-brush"></i>
        </div>
      </div>
      <AudioPlay
        class="fr click"
        ref="audioPlay"
        :type="1"
        :audioSrc="baseURL + sentenceData.audioURL"
        v-show="isShowAudio"
        @audioEnded="audioPlayEnd"
      ></AudioPlay>
    </div>
    <div class="study-line"></div>
    <div class="study-bottom">
      <div class="study-bottom-reminder" v-if="isShowReminder">请仔细听</div>
      <div class="study-bottom-two study-bottom-options" v-else>
        <div class="study-bottom-left">
          <div class="paraphrase" v-if="isShowParaphrase">
            {{ sentenceData.paraphrase }}
          </div>
          <div class="options">
            <div
              class="options-item click"
              v-for="(item, index) in optionList"
              :key="index"
              @click="checkWordOption(item)"
              :class="item.isChecked ? 'item-hidden' : ''"
            >
              <div>
                {{ item.word }}
              </div>
            </div>
          </div>
        </div>
        <div class="study-bottom-right">
          <div
            class="study-bottom-not click"
            @click="clickNot"
            v-show="iconType == 1"
          >
            <img src="@/assets/img/star-false.png" alt="" />
          </div>
          <div
            class="study-bottom-practice click"
            @click="goPractice"
            v-show="iconType == 2"
          >
            <div class="icon-text">练</div>
          </div>
          <div
            class="study-bottom-next click"
            @click="goNext"
            v-show="iconType == 3"
          >
            <img src="@/assets/img/memory-next.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import { throttle } from "@/utils/utils";
import { setSentenceToWord } from "@/assets/js/sentence2word.js";
export default {
  data() {
    return {
      isShowReminder: false,
      isShowParaphrase: false,
      isShowSentence: false,
      isShowAudio: false,
      isCheckedSentence: false,
      iconType: 1,
      wordList: [],
      optionList: [],
      answerList: [],
      firstIsTrue: null,
    };
  },
  computed: {},
  methods: {
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    audioPlayEnd() {
      if (this.isShowReminder) {
        this.isShowReminder = false;
      }
    },

    // 初始化
    initCom() {
      let result = setSentenceToWord(this.sentenceData.content);
      this.wordList = result.wordList;
      this.optionList = result.optionList;
      this.answerList = result.answerList;
      this.firstIsTrue = null;
      this.isCheckedSentence = false;
      this.iconType = 1;
      this.isShowSentence = false;

      if (this.studyType == "sentenceExamples") {
        this.isShowReminder = true;
        this.isShowParaphrase = false;
        this.isShowAudio = true;
        this.$nextTick(() => {
          this.playAudio();
        });
      }
      if (this.studyType == "sentenceTranslation") {
        this.isShowReminder = false;
        this.isShowParaphrase = true;
        this.isShowAudio = false;
      }
    },
    // 选择单词选项
    checkWordOption(option) {
      if (option.isChecked) return;
      if (this.isCheckedSentence) {
        let isEmpty = this.answerList.every((item) => {
          return !item.checkedOption;
        });
        if (isEmpty) {
          this.isCheckedSentence = false;
        } else {
          return;
        }
      }
      if (this.isShowSentence) {
        this.isShowSentence = false;
      }

      if (this.isShowParaphrase && this.studyType != "sentenceTranslation") {
        this.isShowParaphrase = false;
      }
      if (this.firstIsTrue === true || this.firstIsTrue === false) {
        //   立即校验
        this.checkedTheWord(option);
      } else {
        //   第一遍整体校验
        for (let i = 0; i < this.answerList.length; i++) {
          let item = this.answerList[i];
          if (!item.isPunctuation && !item.checkedOption) {
            item.checkedOption = option;
            break;
          }
        }
        option.isChecked = true;
        let isCheck = this.answerList.every((item) => {
          return item.checkedOption || item.isPunctuation;
        });
        if (isCheck) {
          this.checkSentence();
        }
      }
    },
    // 移除选中单词
    cancellOption(answerData) {
      if (this.isCheckedSentence) return;
      this.optionList.forEach((item) => {
        if (item.index == answerData.checkedOption.index) {
          item.isChecked = false;
        }
      });
      answerData.checkedOption = null;
    },
    deleteNearOption() {
      if (this.isCheckedSentence) return;
      let answerData = null;
      this.answerList.forEach((item) => {
        if (!item.isPunctuation && item.checkedOption) {
          answerData = item;
        }
      });
      if (!answerData) {
        return;
      }
      console.log(answerData);
      this.optionList.forEach((item) => {
        if (item.index == answerData.checkedOption.index) {
          item.isChecked = false;
        }
      });
      answerData.checkedOption = null;
    },
    // 我不会
    clickNot() {
      this.checkSentence();
    },
    // 继续练习
    goPractice() {
      this.answerList.forEach((item) => {
        item.checkedOption = null;
      });
      this.optionList.forEach((item) => {
        item.isChecked = false;
      });
      this.isCheckedSentence = false;
      if (this.studyType != "sentenceTranslation") {
        this.isShowParaphrase = false;
      }
      this.iconType = 0;
    },
    //第一次整体校验
    checkSentence() {
      this.isCheckedSentence = true;
      this.isShowParaphrase = true;
      this.isShowSentence = true;
      let isEmpty = this.answerList.every((item) => {
        return !item.checkedOption;
      });
      if (isEmpty) {
        this.firstIsTrue = false;
        this.$emit("answerFalse");
        this.iconType = 0;
        return;
      }
      this.answerList.forEach((item) => {
        if (item.checkedOption && item.checkedOption.word == item.trueWord) {
          item.isTrue = true;
        }
      });
      let isTrue = this.answerList.every((item) => {
        return item.isTrue;
      });
      if (this.firstIsTrue !== true && this.firstIsTrue !== false) {
        this.firstIsTrue = isTrue;
      }
      if (isTrue === true) {
        //   答对了
        this.iconType = 3;
      }
      if (isTrue === false) {
        this.iconType = 2;
        this.$emit("answerFalse");
        if (this.studyType == "sentenceExamples") {
          this.playAudio();
        }
      }
    },
    checkedTheWord(option) {
      for (let i = 0; i < this.answerList.length; i++) {
        let item = this.answerList[i];
        if (!item.isPunctuation && !item.checkedOption) {
          if (option.word == item.trueWord) {
            //   答对
            item.checkedOption = option;
            option.isChecked = true;
            let isCheck = this.answerList.every((item) => {
              return item.checkedOption || item.isPunctuation;
            });
            if (isCheck) {
              this.checkSentence();
            }
          } else {
            this.isShowSentence = true;
            this.playAudio();
            this.$emit("answerFalse");
          }
          break;
        }
      }
    },
    goNext: throttle(function () {
      this.$emit("answerTrue", this.firstIsTrue, () => {
        this.$emit("nextSentence");
      });
    }, 2000),
    answerTrue() {
      // 答对了
      this.$emit("answerTrue", this.firstIsTrue);
    },
  },
  components: {
    AudioPlay,
  },
  props: {
    sentenceData: {
      type: Object,
    },
    studyType: {
      type: String,
      default: "sentenceExamples",
    },
  },
  watch: {
    // sentenceData: {
    //   handler: function () {
    //     this.initCom();
    //   },
    //   immediate: true,
    //   deep: true, //对象内部的属性监听，也叫深度监听
    // },
  },
};
</script>